<template>
  <div>
    <table class="table table-bordered">
      <tr>
        <td>理财名称</td>
        <td>{{ list.L_Name }}</td>
      </tr>
      <tr>
        <td>最低金额</td>
        <td>{{ list.L_MinMoney }}</td>
      </tr>
      <tr>
        <td>理财金额</td>
        <td><input type="text" v-model="LC_Money" /></td>
      </tr>
      <tr>
        <td>预计收益</td>
        <td>{{ (LC_Money / 0.2 / 12).toFixed(2) }}</td>
      </tr>
      <tr>
        <td></td>
        <td><input type="button" value="购买" @click="add" /></td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();

import { useStore } from '../../src/store/user';
const store = useStore();

let data: any = reactive({
  sdata: {},
  list: {},
  LC_Money: 0
});
const { sdata, list, LC_Money } = toRefs(data);

onMounted(() => {
  Show();
  console.log(store.userInfo.UId);
});

const Show = () => {
  axios({
    url: 'http://localhost:52089/api/User/Fan',
    method: 'get',
    params: {
      L_Id: route.query.L_Id
    }
  }).then((res) => {
    console.log(res);
    list.value = res.data.data;
  });
};

const add = () => {
  if (LC_Money.value < list.value.L_MinMoney) {
    alert('不能低于最低金额');
    return;
  }
  axios({
    url: 'http://localhost:52089/api/User/Add',
    method: 'post',
    data: {
      LC_Money: LC_Money.value,
      U_Id: store.userInfo.U_Id,
      L_Id: route.query.L_Id
    }
  }).then((res) => {
    console.log(res);
    if (res.data.data > 0) {
      alert('购买成功');
      router.push('/show');
    }
  });
};
</script>

<style scoped></style>
